<!-- Header v1 -->
<header id="js-header" class="u-header u-header--sticky-top u-header--change-appearance"
        data-header-fix-moment="100">
    <div class="u-header__section g-theme-bg-blue-dark-v1-opacity-0_9 g-transition-0_3 g-py-10 oneBeautifully-header"
         data-header-fix-moment-exclude="g-py-10"
         data-header-fix-moment-classes="g-py-10">
        <nav class="navbar navbar-expand-lg py-0">
            <div class="container g-pos-rel" style="justify-content: center;">
                <!-- Logo -->
                <a routerLink="/" class="js-go-to navbar-brand u-header__logo"
                   data-type="static">
                    <img class="u-header__logo-img u-header__logo-img--main" src="assets/img/logo.png" alt="Image Description" style="height: 30px;">
                </a>
                <!-- End Logo -->

                <!-- Navigation -->
                <div class="collapse navbar-collapse align-items-center flex-sm-row" id="navBar">
                    <!-- <ul id="js-scroll-nav" class="navbar-nav text-uppercase g-letter-spacing-2 g-font-size-11 g-pt-20 g-pt-0--lg ml-auto">
                        <li class="nav-item g-mr-10--lg g-mr-15--xl g-mb-7 g-mb-0--lg active">
                            <a href="#home" class="nav-link-native nav-link g-color-white p-0" (click)="changeToHash()">{{language=="en"?textConfig[0].en:''}}{{language=="zh"?textConfig[0].zh:''}}<span class="sr-only">(current)</span></a>
                        </li>
                        <li class="nav-item g-mx-10--lg g-mx-15--xl g-mb-7 g-mb-0--lg">
                            <a href="#situation" class="nav-link-native nav-link g-color-white p-0" (click)="changeToHash()">{{language=="en"?textConfig['1'].en:''}}{{language=="zh"?textConfig['1'].zh:''}}</a>
                        </li>
                        <li class="nav-item g-mx-10--lg g-mx-15--xl g-mb-7 g-mb-0--lg">
                            <a href="#solution" class="nav-link-native nav-link g-color-white p-0" (click)="changeToHash()">{{language=="en"?textConfig['2'].en:''}}{{language=="zh"?textConfig['2'].zh:''}}</a>
                        </li>
                        <li class="nav-item g-mx-10--lg g-mx-15--xl g-mb-7 g-mb-0--lg">
                            <a href="#strength" class="nav-link-native nav-link g-color-white p-0" (click)="changeToHash()">{{language=="en"?textConfig['3'].en:''}}{{language=="zh"?textConfig['3'].zh:''}}</a>
                        </li>
                        <li class="nav-item g-mx-10--lg g-mx-15--xl g-mb-7 g-mb-0--lg">
                            <a href="#whitepaper" class="nav-link-native nav-link g-color-white p-0" (click)="changeToHash()">{{language=="en"?textConfig['4'].en:''}}{{language=="zh"?textConfig['4'].zh:''}}</a>
                        </li>
                        <li class="nav-item g-mx-10--lg g-mx-15--xl g-mb-7 g-mb-0--lg">
                            <a href="#team" class="nav-link-native nav-link g-color-white p-0" (click)="changeToHash()">{{language=="en"?textConfig['5'].en:''}}{{language=="zh"?textConfig['5'].zh:''}}</a>
                        </li>
                        <li class="nav-item g-mx-10--lg g-mx-15--xl g-mb-7 g-mb-0--lg">
                            <a href="#roadmap" class="nav-link-native nav-link g-color-white p-0" (click)="changeToHash()">{{language=="en"?textConfig['6'].en:''}}{{language=="zh"?textConfig['6'].zh:''}}</a>
                        </li>
                        <li class="nav-item g-ml-10--lg g-ml-15--xl">
                            <a href="#tokenplan" class="nav-link-native nav-link g-color-white p-0" (click)="changeToHash()">{{language=="en"?textConfig['7'].en:''}}{{language=="zh"?textConfig['7'].zh:''}}</a>
                        </li>
                    </ul> -->
                </div>
                <!-- End Navigation -->

                <!-- language selector -->
                <div class="language-native col-auto d-flex g-pt-5 g-pt-0--sm g-pl-10 g-pl-20--sm g-font-size-11">
                    <div class="g-pos-rel g-px-10--lg g-font-size-11">
                        <a id="profileMenuInvoker" class="d-block" aria-controls="profileMenu" aria-haspopup="true" aria-expanded="false" data-dropdown-event="click" data-dropdown-target="#profileMenu" data-dropdown-type="css-animation" data-dropdown-duration="300"
                           data-dropdown-animation-in="fadeIn" data-dropdown-animation-out="fadeOut" (click)="toggleLangChange()">
                            <span class="g-pos-rel g-top-2">
                                <span class="" style="color: white;">{{language=="en"?'En':''}}{{language=="zh"?'中文':''}}</span>
                                <i class="hs-admin-angle-down g-pos-rel g-top-2 g-ml-10" style="color: white;"></i>
                            </span>
                        </a>

                        <!-- language Menu -->
                        <ul *ngIf="showLangChange" id="profileMenu" class="g-pos-abs g-left-0 g-width-100x--lg g-nowrap g-font-size-14 g-py-20 g-mt-17 rounded" style="list-style: none; padding-left: 0; background-color: rgba(100, 100, 100, 0.3); ">
                            <li class="g-mb-10">
                                <a class="media g-py-5 g-px-20">
                                    <span class="media-body align-self-center" style="color: white;font-size: 10px;" (click)="changeLanguage('en')">En</span>
                                </a>
                            </li>
                            <li class=" g-mb-10">
                                <a class="media g-py-5 g-px-20">
                                    <span class="media-body align-self-center" style="color: white;font-size: 10px;" (click)="changeLanguage('zh')">中文</span>
                                </a>
                            </li>
                        </ul>
                        <!-- End Language Menu -->
                    </div>
                </div>
                <!-- End Language Selector -->

                <div class="nav-item g-mx-10--lg g-mx-15--xl g-mb-7 g-mb-0--lg" id="" style="margin-right: 0;" *ngIf="!isLogined || user == null">
                    <ul class="navbar-nav text-uppercase g-letter-spacing-2 g-font-size-11 g-pt-20 g-pt-0--lg ml-auto">
                        <li class="nav-item g-mr-10--lg g-mr-15--xl g-mb-7 g-mb-0--lg active">
                            <a href="#home" class="nav-link g-color-white p-0"  (click)="toggleLoginDialog()">{{language=="en"?'Login':''}}{{language=="zh"?'登录':''}}</a>
                        </li>

                    </ul>
                </div>
                <div class="login-button text-white" *ngIf="isLogined && user != null">
                    <a style="text-decoration:underline;cursor:pointer;" (click)="hideUsercenter()"><span class="navEmail" *ngIf="user">{{user.email}}</span></a>
                    <ul [ngClass]="{'hide':ishideUsercenter}" class="userCenter rounded g-pos-abs g-nowrap g-font-size-14 g-py-20 g-mt-17" style="position: absolute;list-style-type: square none;list-style:none;padding:0 15px;background-color:rgba(0,0,0,0.8);border-radius:5px;border:1px solid #000;z-index:9999;">
                        <li><span (click)="pathToUserPersonalCenter()" style="cursor: pointer;">{{language=="en"?'Usercenter':''}}{{language=="zh"?'用户中心':''}}</span></li>
                        <li><span (click)="logout()" style="cursor: pointer;">{{language=="en"?'Logout':''}}{{language=="zh"?'退出登录':''}}</span></li>
                    </ul>
                </div>

                <!-- Responsive Toggle Button -->
                <!-- <button class="navbar-toggler btn g-line-height-2 g-brd-none g-pa-0 g-pos-abs g-top-10 g-right-0" type="button"
                        aria-label="Toggle navigation"
                        aria-expanded="false"
                        aria-controls="navBar"
                        data-toggle="collapse"
                        data-target="#navBar">
                <span class="hamburger hamburger--slider">
                  <span class="hamburger-box">
                    <span class="hamburger-inner"></span>
                  </span>
                </span>
                </button> -->
                <!-- End Responsive Toggle Button -->
            </div>
        </nav>
    </div>
    <login [showDialog]="showLoginDialog" (toggleLoginDialogEvent)="toggleLoginDialog($event)"></login>
</header>
<!-- End Header v1 -->